<template>
  <div>
    <el-dialog
      title="角色授权"
      :visible.sync="dialogVisible"
      :before-close="cancelDialog"
    >
      <div class="tableshow">
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="date" label="资源名称" width="350">
          </el-table-column>
          <el-table-column width="350">
            <template slot="header" slot-scope="scope"> 资源 </template>
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.checked"
                @change="handleCheckedOne(scope.row)"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button class="commit" @click="configDialog">提 交</el-button>
        <el-button type="primary" @click="cancelDialog">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //父组件 传 过来的 值
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    tid: String,
  },
  watch: {
    //监听 弹窗显示， 可以用来写 请求接口
    dialogVisible: function (newVal, oldVal) {
      if (newVal) {
        // console.log(newVal);
      }
    },
    tid() {
      this.getData();
    },
  },
  components: {},
  name: "componentDialog",
  data() {
    return {
      // 控制popover弹出框是否展示
      popoverVisible: false,
      // 需把数据整理成以下结构
      // tree数据(children的id第一位为父级id，用于在select中清除某一点，可找到其父级去掉全选)
      canDo: [],
      Data: [],
      tableData: [
        {
          id: 1,
          date: "知识库",
          checked: false,
          children: [
            {
              id: 11,
              date: "法规制度库",
              checked: false,
            },
            {
              id: 12,
              date: "审计案例库",
              checked: false,
            },
            {
              id: 13,
              date: "审计要点库",
              checked: false,
            },
          ],
        },
        {
          id: 2,
          date: "知识库",
          checked: false,
          children: [
            {
              id: 21,
              date: "法规制度库",
              checked: false,
            },
            {
              id: 22,
              date: "审计案例库",
              checked: false,
            },
            {
              id: 23,
              date: "审计要点库",
              checked: false,
            },
          ],
        },
        {
          id: 3,
          date: "知识库",
          checked: false,
          children: [
            {
              id: 31,
              date: "法规制度库",
              checked: false,
            },
            {
              id: 32,
              date: "审计案例库",
              checked: false,
            },
            {
              id: 33,
              date: "审计要点库",
              checked: false,
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // select的值
      typeValue: [],
      ziyuan: [],
      num: 0,
    };
  },
  created() {},
  mounted() {},
  methods: {
    // getData() {
    // this.$axios.get("http://192.168.31.199:8076//roleminssions/resource/getRoleResource/" + this.tid)
    //   .then((res) => {
    //     // console.log(res.data.data)
    //     this.Data = res.data.data;
    //     this.tableData = res.data.data;
    //   })
    //   .catch((res) => {
    //     console.log(2);
    //   });
    // },

    // 绑定每一行checkbox的change事件
    handleCheckedOne(row) {
      // console.log(row);
      if (row.children) {
        row.children.forEach((item) => {
          item.checked = row.checked;
        });
      }
      this.check(row);
    },
    check(row) {
      let flag = 0;
      for (let key in this.tableData) {
        for (let i = 0; i < this.tableData[key].children.length; i++) {
          if (this.tableData[key].children[i].id == row.id) {
            flag++;
            if (flag === 3) {
              this.tableData[key].checked = true;
              // break
            } else {
              this.tableData[key].checked = false;
              // break
            }
          }
        }
      }
      console.log(flag);
    },

    configDialog() {
      console.log(this.tid);
      console.log(this.ziyuan);
      //       this.$axios({
      //      		   method: "post",
      //      		   url: "http://192.168.31.199:8076//roleminsions/role/setRoleResource/"+ this.tid,
      //   			   data: this.ziyuan,//post的会将请求参数放在请求体中
      // //      		   params: {
      // //      		       ID: 1,
      // //      		       age:18
      // //      		     },//get的参数会将请求参数拼接在url上
      //      		 }).then((res) => {
      //      		   console.log(1);
      // 				// this.tableData = res.data.data
      //      		 });
      this.$emit("update:dialogVisible", false);
    },

    //修改父组件传过来的值
    cancelDialog() {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>
<style lang='scss' scoped>
.tableshow {
  border: 1px solid lightgray;
}

.form {
  background: #eee;
  padding: 0 10px;
}
.dialog-footer {
  text-align: center;
}

.commit {
  color: white;
  background-color: rgb(98, 202, 183);
}
</style>